<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<script lang="ts" setup>
import {
  Download,
  Plus,
  Search,
  Upload,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import service from '~/composables/request'

const searchInput = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(2)

const page = ref({
  dialogTableVisible: false,
  dialogFormVisible: false,
})
// GET 请求函数
function sd() {
  service.get('33')
}

const tableData = ref([
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/22f22a530576e2ceaf9c0045f5ce2b30.jpg',
    name: '智能手表 Pro',
    spec: '黑色',
    unit: '个',
    costPrice: '￥399',
    purchasePrice: '￥429',
    retailPrice: '￥599',
    wholesalePrice: '￥499',
    stock: 128,
  },
  {
    image: 'https://ai-public.mastergo.com/ai/img_res/6d0045b7ba04544cacc46a3f7489d5e7.jpg',
    name: '无线耳机',
    spec: '白色',
    unit: '个',
    costPrice: '￥199',
    purchasePrice: '￥229',
    retailPrice: '￥299',
    wholesalePrice: '￥259',
    stock: 256,
  },
])

function handleEdit(index: number, row: any) {
  console.log(index, row)
}

function handleDelete(index: number, row: any) {
  console.log(index, row)
}
</script>

<template>
  <div>
    <div>
      <el-card class="!rounded-lg">
        <div class="mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <el-input
              v-model="searchInput"
              placeholder="请输入商品名称、首字母、货号"
              :prefix-icon="Search"
              class="w-[300px]"
            />

            <!--              <Idtable :myData="tableData" /> -->
            <el-button class="!rounded-button">
              全部类别
            </el-button>
            <el-button type="warning" @click="page.dialogTableVisible = true">
              <el-icon class="mr-2">
                <Plus />
              </el-icon>
              创建新商品
            </el-button>
            <el-button type="primary">
              <el-icon class="mr-2">
                <Upload />
              </el-icon>
              导入商品
            </el-button>
            <el-button type="primary">
              <el-icon class="mr-2">
                <Download />
              </el-icon>
              导出商品
            </el-button>
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="40" />
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column label="商品图片" width="100">
            <template #default="scope">
              <el-image
                :src="scope.row.image"
                class="h-[60px] w-[60px] object-cover !rounded"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="spec" label="规格" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="costPrice" label="成本价" />
          <el-table-column prop="purchasePrice" label="采购价" />
          <el-table-column prop="retailPrice" label="零售价" />
          <el-table-column prop="wholesalePrice" label="批发价" />
          <el-table-column prop="stock" label="库存" />
          <el-table-column prop="purchasePrice" label="采购价" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" link @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-button type="danger" link @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-6 flex items-center justify-between">
          <div class="text-sm text-gray-500">
            共 {{ total }} 条记录
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
            class="mt-4"
          />
        </div>
      </el-card>
    </div>
  </div>
  <el-dialog v-model="page.dialogTableVisible" v-loading title="收货地址">
    <el-form>
      <el-form-item label="活动名称">
        <el-input autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="page.dialogTableVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="sd">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-aside {
  width: 200px;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item.is-active) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-table th) {
  background-color: #f8fafc;
  padding: 12px;
  font-weight: normal;
  color: #64748b;
}

:deep(.el-table td) {
  padding: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
